/*
 * @Author: xiaosihan 
 * @Date: 2023-07-13 17:21:27 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-04 15:04:04
 */


.goodsEditorModal {
  position: relative;
  overflow-y: auto;
  user-select: none;
  // height: 80vh;

  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: rgba(0, 0, 0, 0);
  }

  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #1890ff;
  }


  .left_info {
    border: 1px solid #000000;
    padding: 4px;
    border-radius: 4px;
    width: calc(100% - 20px);
    margin-right: 4px;
    display: inline-block;
    vertical-align: top;

    .thumbs_list {
      height: 100px;

      .thumbs_item {
        display: inline-block;
        position: relative;

        .thumbs {
          display: inline-block;
          width: 100px;
          margin: 4px;
          background-color: #f5f5f5;
        }

        .close {
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
          width: 20px;
        }
      }
    }

    // 上身列表
    .mockup_list {
      height: 100px;

      .mockup_item {
        display: inline-block;
        position: relative;

        .close {
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
          width: 20px;
        }

        .down_mockup {
          position: absolute;
          right: 2px;
          bottom: 2px;
          font-size: 20px;
          background-color: #ffffff;
          border-radius: 50%;
          cursor: pointer;

          &:hover {
            color: #0088ff;
          }
        }

      }
    }

    .modal_preview {
      float: right;
      position: relative;
      border: 1px solid #000000;
      width: 400px;
      height: 400px;
      vertical-align: top;
      background-color: #f5f5f5;


      .render_container {
        width: 400px;
        height: 400px;
      }

      .resetBtn {
        position: absolute;
        top: 100%;
        left: 33.33%;
        transform: translate(-50%, 2px);
      }

      .saveToThumb {
        position: absolute;
        top: 100%;
        left: 66.66%;
        transform: translate(-50%, 2px);
      }
    }

    .component_list {
      margin: 4px;
      border: 1px solid #000000;
      padding: 4px;

      .component_info {
        margin-top: 4px;

        .component_left {
          display: inline-block;
          vertical-align: top;
          width: 512px;
          height: 512px;

          .component_color_list {
            .colorBlock {
              margin: 10px;
              display: inline-block;
              width: 24px;
              height: 24px;
              border: 1px solid #cccccc;
              border-radius: 4px;
              cursor: pointer;
            }
          }

          .component_print_aear {
            display: inline-block;
            vertical-align: top;
            width: 512px;
            height: 512px;
            border: 1px solid #000000;
          }
        }

        .component_print_data {
          padding: 8px;
          width: calc(100% - 540px);
          display: inline-block;
          vertical-align: top;
          border: 1px solid #000000;

          .close {
            width: 20px;
          }

          .icon {
            height: 30px;
            border: 1px solid #c7c7c7;
            display: inline-block;
            margin: 0px 10px -7px 10px;
            width: 30px;
            vertical-align: middle;
            cursor: pointer;
            top: -5px;
            position: relative;
          }
        }

      }
    }

  }



  // 尺码打印信息
  .print_info {
    position: relative;
    border: 1px solid #000000;

    .print_layer {
      vertical-align: top;
      display: inline-block;
      min-width: 100px;
      min-height: 100px;
      border: 1px solid #000000;
    }

    .print_param {
      padding: 4px;
      vertical-align: top;
      display: inline-block;
    }
  }

  // 尺码详情
  .size_info {
    position: relative;
    border: 1px solid #cccccc;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  // 重量
  .wieght {
    margin: 4px 0px;
  }

  // 阶梯价格
  .step_price {

    .prices {
      margin: 4px;
    }

    .step_price_item {
      position: relative;
      padding-left: 20px;
      margin: 4px;
      border: 1px solid #ababab;
      border-radius: 20px;
      padding: 10px;
      width: 700px;
    }

    .add_step_price {
      margin: 0px;
    }

    .delete_step_price {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 4px;
      right: 4px;
    }

  }

}